<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>演示14.3jQuery发起ajax请求</title>
	</head>
	<body>
		<ul>
			<li>用户名:<input type="text" id="txtUserId" /></li>
			<li>密码：<input type="password" id="txtPassword" /></li>
			<li>请再次输入密码：<input type="password" id="txtPassword2" /></li>
			<li><button type="button" id="btnReg">注册</button></li>
		</ul>
		
		<ul id="ulBlogList">
			
		</ul>
		<script src="jquery1.11.1.js"></script>
		<script type="text/javascript">
			$("#btnReg").click(function(){
				// 获取用户输入的用户名并去掉两侧空格
				var userid = $.trim($("#txtUserId").val());
				// 获取用户密码.
				var pwd = $("#txtPassword").val();
				if(!userid || !pwd){
					alert("用户名或密码不能为空");
					return;
				}
				if(userid.length < 6 || userid.length > 15){
					alert("用户名不能少于6位或大于15位");
					return;
				}
				if(pwd.length < 6 || pwd.length > 15){
					alert("密码不能少于6位或大于15位");
					return;
				}
				
				
				var pwd2 = $("#txtPassword2").val();
				if(pwd != pwd2){
					alert("输入的两个密码不一致。请重新输入");
					return;
				}
				var url = "http://192.168.9.22:8000/blog/reg_user/";
				var param = {"username": userid, "password": pwd};
				$.post(url, param, function(data){
					if(data.result != 1){
						alert(data.message);
					}else{
					     // 执行注册成功之后的操作
						alert("注册成功了鸭");
					}
				});
			})
			
			// 发起无参的get ajax请求
			function initBlogList(){
				var url = "http://192.168.9.22:8000/blog/query_blog/";
				$.get(url, {}, function(data){
					var html = "";
					for(var i=0; i<data.datas.length; i++){
						html += "<li>" + JSON.stringify(data.datas[i]) + "</li>";
					}
					$("#ulBlogList").html(html);
				})
			}
			
			// 发起带参数的get ajax请求
			function initUserBlogList(username){
				var url = "http://192.168.9.22:8000/blog/query_user_blog/";
				$.get(url, {'username': username}, function(data){
					var html = "";
					for(var i=0; i<data.datas.length; i++){
						html += "<li>" + JSON.stringify(data.datas[i]) + "</li>";
					}
					$("#ulBlogList").html(html);
				})
			}
			initUserBlogList('dream7');
		</script>
	</body>
</html>
